<template>
  <common-edit-dialog
    :title="title"
    :visible.sync="open"
    @cancel="cancel"
    @submit="submitForm"
    :buttonLoading="buttonLoading"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="规则名称" prop="ruleConfigName">
            <common-input
              v-model="form.ruleConfigName"
              :maxlength="32"
              placeholder="请输入"
              :disabled="
                form.ruleConfigId && form.isDefault === 'Y' ? true : false
              "
              data-test="rule_variable-input-ruleConfigName"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="规则值" prop="ruleConfigContent">
            <common-input
              v-model="form.ruleConfigContent"
              :maxlength="1024"
              placeholder="请输入（多个值用逗号隔开，IP段用指定符号-隔开，例如：127.0.0.1-2）"
              type="textarea"
              data-test="rule_variable-input-ruleConfigContent"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remark">
        <common-input
          v-model="form.remark"
          type="textarea"
          :verify="false"
          :maxlength="254"
          data-test="rule_variable-input-remark"
        />
      </el-form-item>
    </el-form>
  </common-edit-dialog>
</template>

<script>
import {
  ruleConfigAdd,
  ruleConfigEdit,
} from "@/api/datascan/ruleVariable/variableConfig";

export default {
  data() {
    return {
      buttonLoading: false,
      title: "",
      open: false,
      rules: {
        ruleConfigName: [
          { required: true, message: "请输入规则名称", trigger: "blur" },
        ],
        ruleConfigContent: [
          { required: true, message: "请输入规则值", trigger: "blur" },
        ],
      },
      form: {
        ruleConfigName: "",
        ruleConfigContent: "",
        remark: "",
      },
    };
  },
  methods: {
    show(data) {
      this.open = true;
      this.title = data.ruleConfigId ? "编辑规则变量" : "新增规则变量";
      this.form = data.ruleConfigId ? data : this.$options.data().form;
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.ruleConfigId) {
            ruleConfigEdit({
              ruleConfigId: this.form.ruleConfigId,
              ruleConfigName: this.form.ruleConfigName,
              ruleConfigContent: this.form.ruleConfigContent,
              remark: this.form.remark,
            })
              .then((res) => {
                if (res && res.code === 200) {
                  this.$emit("submitForm");
                  this.$GlobalSuccessMessage("编辑成功");
                  this.open = false;
                } else {
                  this.$GlobalErrorConfirm("编辑失败", res.msg);
                }
              })
              .catch(() => {})
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            ruleConfigAdd(this.form)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$emit("submitForm");
                  this.$GlobalSuccessMessage("保存成功");
                  this.open = false;
                } else {
                  this.$GlobalErrorConfirm("保存失败", res.msg);
                }
              })
              .catch(() => {})
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
    cancel() {
      this.open = false;
    },
  },
};
</script>

<style lang="scss" scoped></style>
